<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文字与文本</title>
    <style>
        .a1 h2 {
            /* 文字居中对齐 */
            text-align: center;
        }

        .a1 p {
            border: 1px solid red;
            width: 500px;
        }

        .a1 p:first-of-type {
            /* 文字右对齐 */
            text-align: right;
        }

        .a1 p:nth-of-type(2) {
            /* 文字右对齐 */
            text-align: center;
        }

        .a1 span {
            /* 在span里面添加text-align是无效的 */
            /* text-align: center; */
            border: 1px solid red;
        }

        .btn {
            width: 200px;
            /* text-align: right; */
        }

        .btn span {
            text-align: right;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: rgb(201, 105, 105);
        }

        .child {
            width: 50px;
            height: 50px;
            background-color: rgb(49, 156, 85);
            display: inline-block;
        }

        .box {
            text-align: center;
        }

        .a2 p {
            /* 段落首行缩进 */
            text-indent: 32px;
            text-decoration: underline wavy red;
        }

        .p1 {
            text-transform: uppercase;
        }

        .p2 {
            text-transform: lowercase;
        }
        .p3{
            font-size: 60px;
            text-shadow: 1px 1px 2px red;
        }
    </style>
</head>

<body>
    <article class="a1">
        <h2>王维山居秋暝</h2>
        <p>
            <span>唐：王维</span>
        </p>
        <p>空山新雨后，天气晚来秋。</p>
        <p>明月松间照，清泉石上流。</p>
        <p>竹喧归浣女，莲动下渔舟。</p>
        <p>随意春芳歇，王孙自可留。</p>
    </article>
    <button class="btn">
        <span>按钮</span>
    </button>
    <div class="box">
        <!-- <div class="child"></div> -->
        <img src="ht-0002.jpg" alt="" width="50px">
    </div>
    <article class="a2">
        <p>属性是用于设置每个段落首行缩进数量值的属性，CSS字体大小（font-size）可以设置的数值和单位在该属性的值中都可以使用（除了百分比）。如果是用于中文布局，一般会使用“2em”的数值和单位来为每个段落的首行缩进“两个字符”。
        </p>
    </article>
    <p class="p1">
        hello wolrd
    </p>
    <p class="p2">
        HELLO WOLRD
    </p>
    <p class="p3">
        HELLO 
    </p>
</body>

</html>